<template>
	<div class="register">
		<el-form class="login-form" :model="form" :rules="rules" ref="formRef">
			<h2>注册</h2>
			<el-form-item label="昵称" prop="username">
				<el-input v-model="form.username" />
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input type="password" v-model="form.password" />
			</el-form-item>
			<el-form-item label="真名" prop="name">
				<el-input v-model="form.name" />
			</el-form-item>
			<el-form-item label="电话" prop="phone">
				<el-input v-model="form.phone" />
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
				<el-input v-model="form.email" />
			</el-form-item>
			<el-form-item label="头像" prop="avatar">
				<el-upload
					v-model:file-list="uploadList"
					:headers="{ token }"
					:action="uploadUrl"
					list-type="picture-card"
					:limit="1"
					:on-success="uploadSuccess"
				>
					<el-icon>
						<Plus />
					</el-icon>
				</el-upload>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="toRegister(formRef)">注册</el-button>
				<el-button @click="toLogin">返回登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { addUser } from "@/api/user";
import { Plus } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores/userStores";

const router = useRouter();
const form = reactive({
	username: "",
	password: "",
	level: 3,
});
const uploadList = ref([]);
const uploadUrl = import.meta.env.VITE_BASE_URL + "/file/upload";
const formRef = ref();
const userStore = useUserStore();
const token = userStore.token;
const rules = {
	username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
	password: [{ required: true, message: "请输入密码", trigger: "blur" }],
	name: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
	phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
	email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
	avatar: [{ required: true, message: "请上传头像", trigger: "blur" }],
};

onMounted(() => {});

const uploadSuccess = (response, uploadFile, uploadFiles) => {
	if (response.success) {
		form.avatar = response.data;
	}
};

function toRegister(formEl) {
	formEl.validate(async (valid) => {
		if (valid) {
			const res = await addUser(form);
			if (!res.success) {
				ElMessage.error(res.msg);
				return;
			}
			await router.push("/login");
		} else {
			return false;
		}
	});
}

function toLogin() {
	router.push("/login");
}
</script>

<style>
.register {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-image: url("@/assets/register.svg");
	background-size: cover;
	background-position: center;
}

.login-form {
	width: 400px;
	padding: 40px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0px 0px 10px #ccc;
	opacity: 0.9;
}

.login-form h2 {
	margin-bottom: 20px;
}

.captcha img {
	width: 150px;
	height: 50px;
	margin-right: 10px;
}

.captcha a {
	font-size: 14px;
	color: #333;
}
</style>
